<!DOCTYPE html>
<html>
<head>
<title>嗨扑米-用户登录/注册</title>
	
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link rel="icon" href="images/haipumi.ico"/> 
<link href="css/global.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" type="text/css" href="css/login.css">
<script src="js/jquery-1.11.3.min.js"></script>
<script src="js/login.js"></script>

<!--为了引入按钮-->

<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="dist/ladda-themeless.min.css">
<link rel="stylesheet" href="css/prism.css">


<!-- 主题有关的样式列表 -->
	<link rel="stylesheet" type="text/css" href="jquery-easyui-1.4.3/themes/black/easyui.css">
	<link rel="stylesheet" type="text/css" href="jquery-easyui-1.4.3/themes/icon.css">
	
	<!-- jquery 和   easyui  的主要组件 -->
	<script type="text/javascript" src="jquery-easyui-1.4.3/jquery.min.js"></script>
	<script type="text/javascript" src="jquery-easyui-1.4.3/jquery.easyui.min.js"></script>
	<script type="text/javascript" src="jquery-easyui-1.4.3/locale/easyui-lang-zh_CN.js"></script>  



</head>
  
<body>
  	<!--头部内容开始 -->
    <iframe class="yhj_head" src="head.jsp"></iframe>
    <!--头部内容结束-->
    
    <div class="yhj_quickregister_0"></div><!--只是用来占位的-->
    
    
  
	<!--中间内容开始-->
    <div class="yhj_login_main">
    	<div class="yhj_login_main_scroll">
        	<div class="yhj_login_main_scroll_bigblock">
            	<img class="yhj_login_main_scroll_bigblock_img" src="images/lk_select_jd_bg4.jpg" />
                <img class="yhj_login_main_scroll_bigblock_img" src="images/lk_select_jj_bg1.jpg" />
                <img class="yhj_login_main_scroll_bigblock_img" src="images/lk_select_jd_bg2.jpg" />
            </div>
            <div class="yhj_login_main_scroll_num">
            	<ul>
                	<li>1</li>
                    <li>2</li>
                    <li>3</li>
                </ul>
            </div>
            <div class="yhj_login_main_scroll_contentblock">
            	<div class="yhj_login_main_scroll_contentblock_login" >
                	<img src="images/yhj_20150901105929.png" width="150"/ style="margin-left:90px;">
               		<form name="yhj_login_main_scroll_contentblock_login_form" id="yhj_login_main_scroll_contentblock_login_form">
                    	<center>
                            <p><label for="yhj_login_main_scroll_contentblock_login_uname">用户名:<br/></label><input value="a" type="text" class="yhj_input" id="yhj_login_main_scroll_contentblock_login_uname" placeholder="请输入您的用户名..." size="30"/></p>
                            <p><label for="yhj_login_main_scroll_contentblock_login_upwd">密&nbsp;&nbsp;&nbsp;码: <br/></label><input value="a" type="password" class="yhj_input" id="yhj_login_main_scroll_contentblock_login_upwd" placeholder="请输入您的密码..." size="30" /></p>
                            <p><label for="yhj_login_main_scroll_contentblock_login_safecode">验证码:<br/></label><input type="text" class="yhj_input" id="yhj_login_main_scroll_contentblock_login_safecode" placeholder="请输入下方的验证码..." size="30" /></p>
                            <img src="code.action" class="safecode" onClick="recode()";/>
                        </center>
                    </form>
                     <p><input type="checkbox" id="yhj_login_main_scroll_contentblock_login_remember"/><label class="yhj_login_main_scroll_contentblock_login_remember" for="yhj_login_main_scroll_contentblock_login_remember">记住我</label></p>
                   		<a href="#" style="position:absolute;right:70px;top:330px;">忘记密码?</a>
                        <img id="safecodeimg" src="images/yhj_refresh-blue.png" style="position:absolute;right:120px;top:280px;" onClick="recode()"/>
                 	<center>
                    	<button class="btn btn-danger ladda-button" data-style="expand-left" style="position:relative;top:130px;" onClick="readytologin()"><span class="ladda-label">登录</span></button>
                    </center>
                    
                </div>
                <div class="yhj_login_main_scroll_contentblock_register" style="display:none;">
               		<form action="" method="post" id="yhj_login_main_scroll_contentblock_register_form">
                    	<center>
                            <p><label for="yhj_login_main_scroll_contentblock_register_uname">用户名:<br/></label><input type="text"  id="yhj_login_main_scroll_contentblock_register_uname" placeholder="请输入您喜欢的用户名..." size="30"/></p>
                           	<span class="yhj_login_main_scroll_contentblock_register_span"><img src="images/yhj_wenhao.png" width="15"/>&nbsp;&nbsp;用户名长度在5个汉字或10个英文字母以内(1，2，中文，_)</span>
                            <p><label for="yhj_login_main_scroll_contentblock_register_upwd">密&nbsp;&nbsp;&nbsp码: <br/></label><input type="password" id="yhj_login_main_scroll_contentblock_register_upwd" placeholder="请输入您的密码..." size="30" /></p>
                            <span class="yhj_login_main_scroll_contentblock_register_span"><img src="images/yhj_wenhao.png" width="15"/>&nbsp;&nbsp;密码由数字和字母组成，长度在6~18位</span>
                            <p><label for="yhj_login_main_scroll_contentblock_register_uemail">邮&nbsp;&nbsp;&nbsp箱: <br/></label><input type="text"/ id="yhj_login_main_scroll_contentblock_register_uemail" placeholder="请输入下方的验证码..." size="30" /></p>
                            <span class="yhj_login_main_scroll_contentblock_register_span"><img src="images/yhj_wenhao.png" width="15"/>&nbsp;&nbsp;请填写您的邮箱，例如@163.com,@qq.com...</span>                       		
                            <p><label for="yhj_login_main_scroll_contentblock_register_safecode">验证码:<br/></label><input type="text"/ id="yhj_login_main_scroll_contentblock_register_safecode" placeholder="请输入下方的验证码..." size="30" /></p>
                            <span class="yhj_login_main_scroll_contentblock_register_span"><img src="images/yhj_wenhao.png" width="15"/>&nbsp;&nbsp;请输入您邮箱中收到的验证邮件的验证码...</span>                  		
                        </center>
                   		<!--<a href="#" style="position:absolute;right:30px;top:276px;">忘记密码</a>
                        <a href="#" style="position:absolute;right:30px; top:200px;">发送验证邮件</a>-->
                        
                    </form>
                 	<center>
                    	<button class="btn btn-danger ladda-button" data-style="expand-left" style="position:relative;top:20px;"><span class= "ladda-label">注册</span></button>
                    </center>
                </div>
            </div>
            <div class="yhj_login_main_scroll_contentblock_card">
            	<ul>
                	<li>登录</li>
                    <li>注册</li>
                </ul>
            </div>
        </div>
    </div>
    <!--中间内容结束-->
    
    
     <!--foot内容开始 -->
     <iframe class="yhj_foot" src="foot.html"></iframe>
     <!--foot内容结束-->
       
     <!--  Totop按钮-->
     <div class="yhj_totop">
        <img src="images/yhj_right39.png" width="40" height="40"/>
     </div>
     <!--按钮结束-->
     
     
	<div id="infomessage" style="position:absolute;bottom:0px; right:50px;display:none;">
	    <div id="p" class="easyui-panel" title="提示信息" 
	            style="width:200px;height:150px;padding:10px;background:#fafafa;"
	            data-options="iconCls:'icon-undo',modal:true">
	        <p>显示提示信息</p>
	    </div>
	</div>
	
	<div id="infomessage2" style="position:absolute;bottom:0px;left:300px;display:none;">
		<div id="p" class="easyui-panel" title=" 提示信息"   	
		        style="width:700px;height:150px;padding:10px;background:#fafafa;"  
		        data-options="iconCls:'icon-help'">  
		    <br/>
		    <p style="color:black;font-size:14px;">panel content.</p>   
		</div>  
	</div>
     
	<script src="dist/spin.min.js"></script>
    <script src="dist/ladda.min.js"></script>
    
    <script>
    
	    function showinfobox(flag,image,string){
			if(flag==1){
				if(image!=""){
					
				}
				$("#infomessage").stop(true,true);
				$("#infomessage p").html(string);
				$("#infomessage").slideDown('narmal').delay(3000).slideUp('fast');
			}else if(flag==2){
				if(image!=""){
					
				}
				$("#infomessage2").stop(true,true);
				$("#infomessage2 p").html(string);
				$("#infomessage2").slideDown('narmal').delay(3000).slideUp('fast');
			}
		}
    
    	function readytologin(){
    		//新建一个timeout计时器，等登录时按钮的效果已经做完以后，才真正执行login
    		setTimeout("login()",1000);
    	}
    	function login(){
    		//alert("asd");
    		//验证表格数据
    		var uname=$("#yhj_login_main_scroll_contentblock_login_uname").val();
    		//alert(uname);
    		var upwd=$("#yhj_login_main_scroll_contentblock_login_upwd").val();
    		var safecode=$("#yhj_login_main_scroll_contentblock_login_safecode").val();
    		var remember=$("#yhj_login_main_scroll_contentblock_login_remember");//记住我的选项，还没有做
    		
    		if(uname==""){
    			showinfobox(2,"","请填写用户名...");
    			return;
    		}else if(upwd==""){
    			showinfobox(2,"","请填写用户密码...");
    			return;
    		}else if(safecode==""){
    			showinfobox(2,"","请填写填写页面上出现的验证码，长度为4...");
    			recode();
    			return;
    		}
    		//向服务器发异步 请求
    		//alert("Sdf");
    		$.ajax({
				type:"POST",
				url:"cust.action?op=login",
				data:{
					ulogon:$("#yhj_login_main_scroll_contentblock_login_uname").val(),
					upwd:$("#yhj_login_main_scroll_contentblock_login_upwd").val(),
					safecode:$("#yhj_login_main_scroll_contentblock_login_safecode").val()
				},
				dataType:"JSON",
				 success:function(data){
					//alert("login");
					if(data.code==1){
						//成功
						location.href="index.jsp";
					}else if(data.code==0){
						showinfobox(2,"",data.msg);
						recode();
					}else if(data.code=2){//现在暂时没有用，如果有登陆后需要跳转的可以用code=2，在msg中存跳转地址
						//拼接的fid在不取的时候对页面不造成影响
						location.href=data.msg+"&fid=0";
						//location.href=data.msg+"&fid=2";
					}
				 }
			});
    	}
    	
        // Bind normal buttons
        Ladda.bind( 'div:not(.progress-demo) button', { timeout: 2000 } );
    
        // Bind progress buttons and simulate loading progress
        Ladda.bind( '.progress-demo button', {
            callback: function( instance ) {
                var progress = 0;
                var interval = setInterval( function() {
                    progress = Math.min( progress + Math.random() * 0.1, 1 );
                    instance.setProgress( progress );
    
                    if( progress === 1 ) {
                        instance.stop();
                        clearInterval( interval );
                    }
                }, 200 );
            }
        } );
        
        $(function(){
        	recode();
        })
    
        // You can control loading explicitly using the JavaScript API
        // as outlined below:
    
        // var l = Ladda.create( document.querySelector( 'button' ) );
        // l.start();
        // l.stop();
        // l.toggle();
        // l.isLoading();
        // l.setProgress( 0-1 );
        
        function recode(){
			$(".safecode").attr("src","code.action?t="+Math.random());
			$("#yhj_login_main_scroll_contentblock_login_safecode").val("");
		}
    
    </script>
    
    
    <script type="text/javascript" src="js/prism.js"></script>

  </body>
</html>

